<template>
    <div>
      <Row class="formRow">
        <Col span="2" class="rightRow">
          <span class="ModelInputTitle" style="width: 100%;text-align: right">项目类型编码</span>
        </Col>
        <Col span="3" class="leftRow">
          <Input v-model="formInline.proTypeCode" placeholder="项目类型编码" clearable style="width: 100%" size="large"></Input>
        </Col>
        <Col span="2" class="rightRow">
          <span class="ModelInputTitle" style="width: 100%;text-align: right">项目类型名称</span>
        </Col>
        <Col span="3" class="leftRow">
          <Input v-model="formInline.proTypeName" placeholder="项目类型名称" clearable style="width: 100%" size="large"></Input>
        </Col>
        <Col span="2" class="rightRow">
          <span class="ModelInputTitle">是否有效</span>
        </Col>
        <Col span="2" class="leftRow">
          <Select  size="large" style="width:100%" v-model="formInline.valid">
            <Option  value="1" >是</Option>
            <Option  value="0" >否</Option>
          </Select>
        </Col>
        <Col span="10" class="leftRow">
          <Button type="primary" @click="onSubmit">查询</Button>
          <Button type="primary" @click="resetForm">重置</Button>
          <Button type="primary" @click="onAdd">添加</Button>
        </Col>
      </Row>

      <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="1" :placement="placement" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>

      <Modal
        v-model="add"
        title="添加"
        @on-ok="addok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="12">   <span class="ModelInputTitle">项目类型编码</span><Input v-model="addForm.proTypeCode" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">项目类型名称</span><Input v-model="addForm.proTypeName" style="width: 200px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">父级项目类型</span><Select   v-model="addForm.pid" style="width: 200px">
          <Option v-for="p in parProject"  :value="p.id" :key="p.id" >{{p.proTypeName}}</Option>
        </Select></Col>
          <Col span="12">   <span class="ModelInputTitle">是否禁用</span><Select   v-model="addForm.valid" style="width: 200px">
          <Option  value="1" >是</Option>
          <Option  value="0" >否</Option>
        </Select></Col>
        </Row>
      </Modal>

      <Modal
        v-model="edit"
        title="修改"
        @on-ok="editok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="12">   <span class="ModelInputTitle">项目类型编码</span><Input v-model="editForm.proTypeCode" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">项目类型名称</span><Input v-model="editForm.proTypeName" style="width: 200px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">父级项目类型</span><Select   v-model="editForm.pid" style="width: 200px">
          <Option v-for="p in parProject"  :value="p.id" :key="p.id" >{{p.proTypeName}}</Option>
        </Select></Col>
          <Col span="12">   <span class="ModelInputTitle">是否禁用</span><Select   v-model="editForm.valid" style="width: 200px">
          <Option  value="1" >是</Option>
          <Option  value="0" >否</Option>
        </Select></Col>
        </Row>
      </Modal>

    </div>
</template>
<script type="text/ecmascript-6">
  import axios from "axios"
    export default {
        data() {
            return {
              formInline: {
                proTypeCode:"",
                proTypeName:"",
                valid:""
              },
              add:false,
              addForm:{
                proTypeCode:"",
                proTypeName:"",
                pid:"",
                valid:""
              },
              edit:false,
              editForm:{
                proTypeCode:"",
                proTypeName:"",
                pid:"",
                valid:"",
                id:""
              },
              page:1,
              pageSize:10,
              tableData:[],
              loading:true,
              total:0,
              placement:"bottom",
              parProject:[],
              cloums:[
                {
                  title: '项目类型编码',
                  key: 'proTypeCode',
                  width:200,
                  align:"center"
                },
                {
                  title: '项目类型名称',
                  key: 'proTypeName',
                  width:200,
                  align:"center"
                },
                {
                  title: '项目类型父级名称',
                  key: 'pidName',
                  width:240,
                  align:"center"
                },
                {
                  title: '是否禁用',
                  key: 'valid',
                  width:200,
                  align:"center"
                },
                {
                  title: '创建人',
                  key: 'creator',
                  width:200,
                  align:"center"
                },
                {
                  title: '修改人',
                  key: 'updater',
//                  width:200,
                  align:"center"
                },
                {
                  title:"操作",
                  width:120,
                  align:"center",
                  fixed:"right",
                  render:(h,params)=>{
                    return h("div",[
                      h("Button",{
                        props:{
                          type:"error",
                          size:"small"
                        },
                        on:{
                          click:()=>{
                            console.log(params.row)
                            this.editForm.proTypeCode = params.row.proTypeCode;
                            this.editForm.proTypeName = params.row.proTypeName;
                            this.editForm.pid = params.row.pid;
                            this.editForm.valid = params.row.valid=="是"?"1":"0";
                            this.editForm.id = params.row.id;
                            this.edit = true;
                          }
                        }
                      },"编辑")
                    ])
                  }
                }
              ]
            }
        },
      mounted(){
          this.init();
          this.getInfo();
      },
      methods:{
        getInfo(){
          //获取父级项目类型
          axios.post("projectType/selectParProjectTypeList").then((res)=>{
            if(res.data.code == "000000"){
              this.parProject = res.data.data;
            }else{
              this.$Notice.error(res.data.msg)
            }
          })
        },
        init(){
          var qs = require("qs");
          var param = qs.stringify({
            page:this.page,
            pageSize:this.pageSize,
            proTypeCode:this.formInline.proTypeCode,
            proTypeName:this.formInline.proTypeName,
            valid:this.formInline.valid
          });
          axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
          axios.post("projectType/selectBusProjectTypeListByPage",param).then((res)=>{
//            console.log(res)
            if(res.data.code == "000000"){
              this.loading = false;
              this.total = res.data.count;
              for(let i = 0;i<res.data.data.length;i++){
                res.data.data[i].valid = res.data.data[i].valid=="1"?"是":"否";
              }
              this.tableData = res.data.data;
            }else{
              this.$Notice.error(res.data.msg)
            }
          })
        },
        onSubmit(){
          this.init();
        },
        resetForm(){
          this.formInline.valid = "";
          this.formInline.proTypeName = "";
          this.formInline.proTypeCode = "";
          this.page = 1;
          this.pageSize = 10;
          this.init();
        },
        onAdd(){
          this.add = true;
        },
        changePage(page){
          this.loading = true;
          this.page = page;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.loading = true;
          this.pageSize = size;
          this.init();
        },
        addok(){
          var qs = require("qs");
          var param = qs.stringify({
            proTypeCode:this.addForm.proTypeCode,
            proTypeName:this.addForm.proTypeName,
            pid:this.addForm.pid,
            valid:this.addForm.valid
          })
          axios.post("projectType/saveProjectType",param).then((res)=>{
              if(res.data.code =="000000"){
                this.$Notice.success({title:"添加成功"});
                this.init();
              }else{
                this.$Notice.error({title:res.data.msg})
              }
          })
        },
        editok(){
          var qs = require("qs");
          var param = qs.stringify({
            proTypeCode:this.editForm.proTypeCode,
            proTypeName:this.editForm.proTypeName,
            pid:this.editForm.pid,
            valid:this.editForm.valid,
            id:this.editForm.id
          })
          axios.post("projectType/updateProjectType",param).then((res)=>{
            if(res.data.code =="000000"){
              this.$Notice.success({title:"修改成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg})
            }
          })
        },
        cancel(msg){
          this.$Notice.error({title:msg})
        }
      }
    }
</script>
